<template>
    <div class="wrap">
        <!-- 详情页面 -->
        <div class="zhu">
            <img
                :src="detaillist.designTemplateImageUrl"
                :style="{
                    height:
                        (5.8 / parseInt(detaillist.width)) *
                            parseInt(detaillist.height) +
                        'rem',
                }"
                alt=""
            />
        </div>
        <div class="web">
            <div class="one">
                <h1>{{ detaillist.templateTitle }}</h1>
                <p>
                    <span>{{ detaillist.kindTitle }}</span>
                </p>
                <p>
                    图片编号为{{
                        detaillist.designTemplateId
                    }}，该手机海报尺寸是{{ detaillist.width }}*{{
                        detaillist.height
                    }}。点击"立即使用"，《{{
                        detaillist.templateTitle
                    }}》一键生成，在线编辑图片，简单拖拉拽，妙处精美手机海报。
                </p>
            </div>
            <div class="two">
                <span v-for="value in list" :key="value">{{ value }}</span>
            </div>
        </div>
        <div class="three">
            <h1>为你推荐</h1>
            <ul>
                <li v-for="item in imglist" :key="item.designTemplateId">
                    <img
                        @click="change(item.designTemplateId)"
                        v-lazy="item.designTemplateImageUrl"
                        :style="{
                            height:
                                (3.4 / parseInt(detaillist.width)) *
                                    parseInt(detaillist.height) +
                                'rem',
                        }"
                        alt=""
                    />
                </li>
            </ul>
        </div>
        <div class="flx">
            <i class="iconfont icon-icon_collect"></i>
            <span>立即编辑</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            kid: 0,
            keyword: "",
            list: [],
            detaillist: {},
            imglist: [],
        };
    },
    created() {
        this.kid = this.$route.params.id;
        this.keyword = this.$route.params.keyword;
        this.getData();
    },
    methods: {
        change(imgId){
            this.kid=imgId;
            this.getData();
        },
        async getData() {
            let res = await fetch(
                "/api/designtemplate/getDetailCacheFileUrl.do?_dataType=json&_dataClientType=3",
                {
                    method: "post",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                    body: `_dataClientType=3&client_type=40&id=${this.kid}`,
                }
            ).then((r) => r.json());
            this.detaillist = res.body.currentTemplate;
            this.list = res.body.currentTemplate.keywords.split(" ");
            this.imglist = res.body.recommendedTemplates;
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    width: 7.5rem;
    margin: 0 auto;
    .zhu {
        width: 7rem;
        margin: 0 auto;
        background-color: #dedede;
        text-align: center;
        border-radius: 0.2rem;
        img {
            width: 5.8rem;
            margin: 0.4rem 0;
        }
    }
    .web {
        width: 7.5rem;
        box-sizing: border-box;
        padding: 0.2rem;
        .one p {
            font-size: 0.24rem;
            color: #333;
            line-height: 0.4rem;
            span {
                font-size: 0.24rem;
                color: #999;
                line-height: 0.6rem;
            }
        }
        .two {
            margin-top: 0.2rem;
            span {
                display: inline-block;
                color: #000;
                font-size: 0.24rem;
                padding: 0.1rem 0.3rem;
                margin: 0.1rem 0.2rem 0.1rem 0;
                background-color: #f3f4f9;
                border-radius: 0.4rem;
            }
        }
    }
    h1 {
        font-size: 0.3rem;
        color: black;
    }
    .three {
        padding: 0.2rem;
        box-sizing: border-box;
        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            li {
                width: 3.4rem;
                margin: 0.2rem 0;
                border-radius: 0.1rem;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
        }
    }

    .flx {
        width: 100%;
        height: 1.2rem;
        padding: 0 0.5rem;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        i{
            display: block;
            width: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            font-size: 0.4rem;
            color: tomato;
            background-color: #f5f5f5;
            border-radius: 0.1rem;
        }
        span {
            display: block;
            width: 5rem;
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.3rem;
            color: white;
            text-align: center;
            background-color: #0773fc;
            border-radius: 0.1rem;
        }
    }
}
</style>
